﻿<!--
 Copyright (c) 2011 Nokia Corporation.
 -->
<UserControl x:Class="SudokuMaster.NumberSelection"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="333" d:DesignWidth="250">
    
    <UserControl.Resources>
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                    	<Storyboard>
                                    		<ColorAnimation Duration="0" To="#FF938686" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rect" d:IsOptimized="True"/>
                                    	</Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="rect" RadiusY="8" RadiusX="8" Stroke="#FFF4F4F5" StrokeThickness="2" Fill="Black"/>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="36"/>
        </Style>
    </UserControl.Resources>
    
    <!-- LayoutRoot will cover all over the parent so that when the user taps anywhere else than the buttons we can hide it or remove it -->
    <!-- Tip: background has to be set to Transparent to get hit test -->
    <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MouseLeftButtonUp="OnClickBackground" Background="Transparent">
   
        <!-- This grid contains the actual buttons -->
        <Grid x:Name="keyboardGrid" Background="{StaticResource PhoneChromeBrush}" Opacity="0.8" Width="250" Height="333">
        
            <!-- Round edges for the selection control -->
            <Grid.Clip>
                <RectangleGeometry RadiusX="10" RadiusY="10" Rect="0,0,250,333" />
            </Grid.Clip>
        
            <!-- 3x4 grid for the numbers and "C" -->
            <Grid HorizontalAlignment="Stretch" Margin="10,10,10,10" Name="grid1"
                  VerticalAlignment="Stretch" ShowGridLines="False"
                  DataContext="{Binding}">
            
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Button Grid.Column="0" Grid.Row="0" Content="1" Style="{StaticResource ButtonStyle}" ManipulationCompleted="Button_ManipulationCompleted" ManipulationStarted="Button_ManipulationStarted"/>
                <Button Grid.Column="1" Grid.Row="0" Content="2" Style="{StaticResource ButtonStyle}" ManipulationCompleted="Button_ManipulationCompleted" ManipulationStarted="Button_ManipulationStarted"/>
                <Button Grid.Column="2" Grid.Row="0" Content="3" Style="{StaticResource ButtonStyle}" ManipulationCompleted="Button_ManipulationCompleted" ManipulationStarted="Button_ManipulationStarted"/>

                <Button Grid.Column="0" Grid.Row="1" Content="4" Style="{StaticResource ButtonStyle}" ManipulationCompleted="Button_ManipulationCompleted" ManipulationStarted="Button_ManipulationStarted"/>
                <Button Grid.Column="1" Grid.Row="1" Content="5" Style="{StaticResource ButtonStyle}" ManipulationCompleted="Button_ManipulationCompleted" ManipulationStarted="Button_ManipulationStarted"/>
                <Button Grid.Column="2" Grid.Row="1" Content="6" Style="{StaticResource ButtonStyle}" ManipulationCompleted="Button_ManipulationCompleted" ManipulationStarted="Button_ManipulationStarted"/>

                <Button Grid.Column="0" Grid.Row="2" Content="7" Style="{StaticResource ButtonStyle}" ManipulationCompleted="Button_ManipulationCompleted" ManipulationStarted="Button_ManipulationStarted"/>
                <Button Grid.Column="1" Grid.Row="2" Content="8" Style="{StaticResource ButtonStyle}" ManipulationCompleted="Button_ManipulationCompleted" ManipulationStarted="Button_ManipulationStarted"/>
                <Button Grid.Column="2" Grid.Row="2" Content="9" Style="{StaticResource ButtonStyle}" ManipulationCompleted="Button_ManipulationCompleted" ManipulationStarted="Button_ManipulationStarted"/>

                <Button Grid.Column="1" Grid.Row="3" Content="C" Style="{StaticResource ButtonStyle}" ManipulationCompleted="Button_ManipulationCompleted" ManipulationStarted="Button_ManipulationStarted"/>

                <Grid.Resources>
                    <!-- Fades in the entire number selection control when a cell is clicked on the main page grid -->
                    <Storyboard x:Name="fadeInAnimation">
                        <DoubleAnimation
                            Storyboard.TargetName="LayoutRoot" 
                            Storyboard.TargetProperty="Opacity"
                            From="0.0" To="0.8" Duration="0:0:0.3" 
                            />
                    </Storyboard>
                    <!-- Fades out the entire number selection control when a selection is made, or player clicked outside of the control -->
                    <Storyboard x:Name="fadeOutAnimation">
                        <DoubleAnimation
                            Storyboard.TargetName="LayoutRoot" 
                            Storyboard.TargetProperty="Opacity"
                            From="0.8" To="0.0" Duration="0:0:0.3" Completed="FadeOutAnimation_Completed" />
                    </Storyboard>
                </Grid.Resources>
            </Grid>
        </Grid>
    </Grid>
    
</UserControl>
